<template>
  <div>
    <el-container style="widht: 100%; height: 100vh">
      <el-main>
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="form"
        >
          <el-form-item label="用户名:" prop="YzhvipName">
            <el-input v-model="form.YzhvipName" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="YzhvipPassword">
            <el-input
              v-model="form.YzhvipPassword"
              placeholder="密码"
              @keyup.enter.native="onSubmit()"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" style="margin: 0 10px"
              >添加用户</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="YzhvipDataID" label="用户ID" width="180">
          </el-table-column>
          <el-table-column prop="YzhvipName" label="用户名" width="180">
          </el-table-column>
          <el-table-column prop="YzhvipPassword" label="密码">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--  <el-button
                    type="success"
                    size="small"
                    @click="onEdit(scope.row.UserDataID)"
                    >修改</el-button
                  > -->
              <el-button
                type="primary"
                size="small"
                @click="onEdit(scope.row.YzhvipDataID)"
                icon="el-icon-edit"
                >修改</el-button
              >
              <!-- <el-button
                  type="danger"
                  size="small"
                  @click="onDelete(scope.row.UserDataID)"
                  >删除</el-button
                > -->
              <el-button
                type="danger"
                size="small"
                @click="onDelete(scope.row.YzhvipDataID)"
                icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <!-- </el-container> -->
    <editform ref="editform" @onRefresh="onRefresh"></editform>
  </div>
</template>

<script>
import { getUserList, deleteUserInfo } from "@/api/user";
import editform from "./editform";
import { insertUserInfo } from "@/api/user";
export default {
  components: { editform },
  data() {
    return {
      nowTime: new Date(),
      tableData: [],
      form: {
        YzhvipName: "",
        YzhvipPassword: "",
      },
    };
  },
  created() {
    this.getUserList();
  },
  mounted() {
    let that = this;
    this.timer = setInterval(function () {
      that.nowTime = new Date().toLocaleString();
    });
  },
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    //添加用户模块
    onSubmit() {
      if (this.form.YzhvipName == "") {
        this.$message.error("用户名不能为空");
        return;
      }
      if (this.form.YzhvipPassword == "") {
        this.$message.error("密码不能为空");
        return;
      }
      let insertdata = this.form;
      insertUserInfo(insertdata).then((rsp) => {
        if (rsp.code === 0) {
          this.$message.success("添加成功!");
          this.onRefresh();
          this.$refs.form.resetFields();
        } else {
          this.$message.error(rsp.msg);
        }
      });
    },
    //获取列表数据模块
    getUserList() {
      this.tableData = [];
      getUserList().then((response) => {
        if (response.code == 0) {
          this.tableData = response.data;
          //console.log(this.tableData)
        } else {
          this.$message.error("获取列表出错！原因：" + response.msg);
        }
      });
    },
    onRefresh() {
      this.getUserList();
    },
    onEdit(yzhvipDataID) {
      console.log(yzhvipDataID);
      this.$refs["editform"].onOpen(yzhvipDataID);
    },
    onDelete(yzhvipDataID) {
      console.log(yzhvipDataID);
      this.$confirm("此操作将永久删除信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = { yzhvipDataID: yzhvipDataID };
          deleteUserInfo(data).then((response) => {
            if (response.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.onRefresh();
            } else {
              this.$message.error("删除失败！原因：" + response.msg);
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>


<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
a {
  color: #333;
  margin-right: 5px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 30px;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.el-header div {
  display: flex;
  align-items: center;
}
.el-header img {
  width: 50px;
  height: 50px;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.timeEnter .iconfont {
  font-size: 25px;
  margin-right: 5px;
}
.toggle-button .iconfont {
  font-size: 20px;
  line-height: 24px;
}
.toggle-button span {
  font-size: 14px;
  vertical-align: top;
}
</style>

